<template>
  <div id="content">
    <div>
      <el-table :data="tableData" border style="width: 99%">
        <!-- <el-table-column type="selection" align="center"></el-table-column> -->
        <el-table-column
          prop="id"
          label="id"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="用户名"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="tel"
          label="电话号码"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="地址"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="addOrUpdata(2,scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Flex JC">
      <div class="mr-10">
        <el-input
          v-model="name"
          placeholder="请输入用户名"
          class="input"
        ></el-input>
      </div>
      <el-button type="success" @click="get()">查询</el-button>
      <el-button type="primary" @click="addOrUpdata(1)">新增</el-button>
    </div>
    <div>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="25%"
        :before-close="handleClose"
      >
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <!-- <el-form-item label="id">
            <el-input v-model="formLabelAlign.id"></el-input>
          </el-form-item> -->
          <el-form-item label="用户名">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="formLabelAlign.tel"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="formLabelAlign.address"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="(dialogVisible = false), submit()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      name: "",
      tableData: [],
      dialogVisible: false,
      labelPosition: "right",
      formLabelAlign: {
        id: "",
        name: "",
        tel: "",
        address: "",
      },
      title: "",
    };
  },
  created() {
    this.all();
  },
  methods: {
    all() {
      //查找info表全部数据
      axios
        .get("http://127.0.0.1/list/all")
        .then((res) => {
          // console.log(res.data);
          this.tableData = res.data;
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
    },
    del(row) {
      //删除操作
      axios
        .get("http://127.0.0.1/list/del", {
          params: {
            id: row.id,
          },
        })
        .then((res) => {
          // console.log(res.data);
          if (res.data.status == 200) {
            this.all();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log("操作失败" + err);
        });
    },
    get() {
      //查询操作
      axios
        .get("http://127.0.0.1/list/get", {
          params: {
            name: this.name,
          },
        })
        .then((res) => {
          // console.log(res.data);
          // this.tableData = res.data;
          if (this.name !== "") {
            this.tableData = res.data;
            return (this.name = "");
          } else {
            this.all();
          }
        })
        .catch((err) => {
          console.log("操作失败" + err);
        });
    },
    add() {
      //添加操作
      axios
        .get("http://127.0.0.1/list/add", {
          params: {
            id: this.formLabelAlign.id,
            name: this.formLabelAlign.name,
            address: this.formLabelAlign.address,
            tel: this.formLabelAlign.tel,
          },
        })
        .then((res) => {
          // console.log(res.data);
          if (res.data.status == 200) {
            this.all();
            this.$message({
              message: "添加成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "添加失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log("操作失败" + err);
        });
    },
    update() {
      //修改操作
      axios
        .get("http://127.0.0.1/list/update", {
          params: {
            id: this.formLabelAlign.id,
            name: this.formLabelAlign.name,
            address: this.formLabelAlign.address,
            tel: this.formLabelAlign.tel,
          },
        })
        .then((res) => {
          // console.log(res.data);
          if (res.data.status == 200) {
            this.all();
            this.$message({
              message: "修改成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "修改失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log("操作失败" + err);
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addOrUpdata(data, row) {
      if (data == 1) {
        this.formLabelAlign = {};
        this.title = "新增";
        this.dialogVisible = true;
        sessionStorage.setItem("data", data);
      } else {
        const { id, name, tel, address } = row;
        this.formLabelAlign = { id, name, tel, address };
        this.title = "修改";
        this.dialogVisible = true;
        sessionStorage.setItem("data", data);
        console.log(data);
      }
    },
    submit(){
      const data = sessionStorage.getItem("data");
      if(data==1){
        this.add();
        sessionStorage.clear();
      }else{
        this.update();
        sessionStorage.clear();
      }
    }
  },
};
</script>
<style lang="scss" scoped>
#content {
  width: 100%;
  height: 100%;
  .el-table {
    margin: 1%;
    border: 1px solid #000;
  }
  ::deep(.el-table--border
      th.el-table__cell.el-table--border
      th.el-table__cell) {
    border: 1px solid #000;
  }
  ::v-deep {
    .el-input {
      input {
        width: 5% !important;
      }
    }
  }
}
</style>